<template>
  <q-layout view="lHh Lpr lFf">
    <q-resize-observer @resize="onResize" />
    <q-header id="layout_header">
      <div
        class="text-center bg-panda-base-light text-panda-text-light"
        style="height:36px;line-height:36px;"
      >
        <img
          src="statics/icon_img/panda.png"
          alt
          style="width: 16px;border-radius: 16px;height: 16px;vertical-align: middle;"
        />&nbsp;
        <span
          style="font-size:12px;vertical-align: middle;"
        >熊猫PMTS-{{ get_title || footer_breadcrumbs_menu_part[1]}}</span>
        <span class="d-inner-block panda-head-span" style="margin-right:10px;"></span>
        <span class="d-inner-block panda-head-span"></span>
        <span class="d-inner-block panda-head-span"></span>
      </div>
    </q-header>
    <q-drawer
      v-model="drawerLeft"
      :width="60"
      :breakpoint="700"
      bordered
      content-class="bg-panda-base-light"
    >
      <q-scroll-area class="fit">
        <div
          class="fixed fixed-left fixed-menu bg-panda-base-light"
          style="width:60px;    padding-top: 36px;"
          content-class="bg-panda-base-light text-panda-text-dark"
        >
          <q-list>
            <!-- <q-item tag="a" style="padding:0;width:60px;">
              <q-item-section class="text-panda-text-dark">
                <div class="text-center">
                  <img src="statics/icon_img/panda.jpg" style="width:60px;height:60px;" alt />
                </div>
              </q-item-section>
            </q-item>-->
            <div style="width:60px;height:60px;">
              <img src="statics/icon_img/panda.jpg" style="width:60px;height:60px;" alt />
            </div>

            <q-item
              v-for="(item,index) in menudata"
              :key="`menu1_${index}`"
              @mouseenter="menu_level_1_mouseenter(item,index)"
              @mouseleave="menu_level_1_mouseleave(item)"
              clickable
              dense
              class="border-box"
              :class="compute_menu_1_class(item)"
              tag="a"
              style="padding:0;width:60px;"
            >
              <q-item-section class="text-panda-text-dark">
                <div style="height:35px ;     line-height: 35px;    " class="text-center">
                  <span :class="compute_menu_icon_class(item)" style=" vertical-align: middle;"></span>
                </div>

                <div class="text-center" style="height:25px;    line-height: 25px;">
                  <span
                    :class="compute_menu_label_class(item)"
                    class="panda-menu-label"
                  >{{item.text}}</span>
                </div>
              </q-item-section>
            </q-item>
          </q-list>
        </div>
      </q-scroll-area>

      <div class="fixed fixed-bottom" style="height: 60px; bottom: 0px;    z-index: 99999;">
        <div class="full-width text-center" style="padding:0;width:60px;">
          <span class="panda_icon_menu_1_sz panda-icon-base"></span>
        </div>
      </div>
    </q-drawer>

    <div
      v-if="show_fixed_menu_2"
      @mouseleave="menu_level_2_container_mouseleave"
      class="fixed fixed-left fixed-menu-2 bg-panda-base-light border-right panda-border-color"
      style="margin-top:37px; box-shadow: 1px 0 0 0 rgba(0,0,0,0.50);width: 180px; "
      :style="`height: ${page_container_height-66}px;`"
      content-class="bg-panda-base-light "
    >
      <q-list style="padding-top: 50px">
        <q-item
          v-for="(item,index) in show_menu_2_data"
          :key="`menu2_${index}`"
          @mouseenter="menu_level_2_mouseenter(item)"
          @mouseleave="menu_level_2_mouseleave(item)"
          @click="menu_level_2_click(item,index)"
          :class=" left_menu_selection == index ? 'panda-menu-select':''"
          clickable
          v-ripple
          class="position-relative"
        >
          <!--变的-->
          <q-item-section avatar class="text-panda-text-dark position-relative" style="left: 40px;">
            <span :class="compute_menu_icon_class(item)"></span>
          </q-item-section>

          <q-item-section
            :class="compute_menu_label_class(item)"
            class="panda-menu-label position-relative"
            style="right: -11px;"
          >{{item.text}}</q-item-section>
        </q-item>
        <q-separator spaced />
      </q-list>
    </div>

    <q-footer id="layout_footer">
      <div class="row text-right bg-panda-base-light text-panda-text-dark line-height-32px q-pl-md">
        <span v-for="(item,index) in footer_breadcrumbs_all" :key="index">
          {{item}}
          <span class="q-mx-sm" v-if="index!=footer_breadcrumbs_all.length-1">></span>
        </span>

        <q-space />
        <span class="full-height">
          <q-icon name="watch_later" class="q-mr-xs" style="font-size:15px" />
        </span>

        <span>{{footer_date}}</span>

        <span class="q-mx-lg">
          <span
            class="panda_icon_wifi q-mr-xs"
            :class="is_online?'panda-wifi-online':'panda-wifi-offline'"
            style="    font-size: 12px;"
          ></span>
          {{is_online?'已连接':'未连接'}}
        </span>
      </div>
    </q-footer>
    <q-page-container
      class="bg-panda-base-dark"
      :style="`  height:${page_container_height}px;`"
      style="margin:0; padding-left:60px;padding-top:36px; "
    >
      <router-view />
    </q-page-container>
  </q-layout>
</template>

<style scoped lang="stylus">
.fixed-menu {
  position: fixed;
  border-right: 1px solid rgba(0, 0, 0, 0.12);
  left: 0;
  display: block;
  top: 0;
  bottom: 0;
  background: #fff;
  z-index: 1000;
}

.fixed-menu-2 {
  position: fixed;
  border-right: 1px solid rgba(0, 0, 0, 0.12);
  left: 60px;
  display: block;
  top: 0;
  bottom: 0;
  background: #fff;
  z-index: 100000;
}

.panda-wifi-online {
  color: green;
  -webkit-text-fill-color: green;
}

.panda-q-item-level-one {
  border-right: 2px solid $panda-base-light;
  border-left: 2px solid $panda-base-light;
}

.panda-q-item-level-one-active {
  border-left: 2px solid $panda-color-blue;
  border-right: 2px solid $panda-base-dark;
}

.panda-wifi-offline {
  color: grey;
  -webkit-text-fill-color: gray;
}

.panda-head-span {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #788299;
  float: right;
  margin: 10px 3px;
}
</style>

<script>
import { openURL } from "quasar";
import menudata from "src/config/menu/menu.js";
import constantmixin from "src/mixins/constant/index.js";
import  api_setter from "src/mixins/setter/api_setter.js"
import { mapActions, mapGetters } from "vuex";
import { date } from "quasar";
import { dom } from "quasar";
const { height, width } = dom;
import { colors } from "quasar";

export default {
  name: "MyLayout",
  mixins: [...constantmixin, ...api_setter],

  data() {
    return {
      menudata: menudata,
      show_menu_2_data: [],
      page_container_height: "",
      footer_date: "",

      drawerLeft: true,
      show_fixed_menu_2: false,
      menu_active_name_pool: [],
      is_online: navigator.onLine,
      footer_breadcrumbs_all: [],
      footer_breadcrumbs_menu_part: [],
      left_menu_selection: 0
    };
  },
  computed: {
    ...mapGetters({
      selectedSportTypeInfo: "get_selectedSportTypeInfo",
      breadcrumbsPart4: "get_breadcrumbsPart4",
      breadcrumbsPart3: "get_breadcrumbsPart3",
      get_title: "get_title"
    })
  },

  created() {
    // this.compute_container_style();
    this.show_date();
    this.compute_active_menu_level();
  },
  mounted() {
    this.compute_container_style();
    window.addEventListener("online", this.updateOnlineStatus);
    window.addEventListener("offline", this.updateOnlineStatus);
  },
  watch: {
    $route() {
      this.compute_active_menu_level();
    },
    menu_active_name_pool() {
      this.$forceUpdate();
    },
    footer_breadcrumbs_menu_part() {
      this.compute_footer_breadcrumbs();
    },
    breadcrumbsPart3() {
      this.compute_footer_breadcrumbs();
    },
    breadcrumbsPart4() {
      this.compute_footer_breadcrumbs();
    }
  },
  beforeDestroy() {
    window.removeEventListener("online", this.updateOnlineStatus);
    window.removeEventListener("offline", this.updateOnlineStatus);
  },
  methods: {
    openURL,
    ...mapActions({
      set_window_size_info: "set_window_size_info"
    }),
    compute_footer_breadcrumbs() {
      /**
       * 面包屑导航 分为 三段
       * 1. 一级 二级菜单名称
       * 2.球种大类
       * 3.今日  （可能有）
       * 4.操作名称  例如 联赛编辑 或者 开盘管理 等
       */
      let finalarr = this.footer_breadcrumbs_menu_part.concat(
        [this.selectedSportTypeInfo.introduction],
        this.breadcrumbsPart3,
        this.breadcrumbsPart4
      );
      this.footer_breadcrumbs_all = this.$lodash.compact(finalarr);
      //console.log(" this.footer_breadcrumbs_all ");
      //console.log(this.footer_breadcrumbs_all);
    },
    compute_footer_breadcrumbs_menu_part() {
      //console.log("compute_footer_breadcrumbs_menu_part()");
      //console.log(this.menu_active_name_pool);
      if (this.menu_active_name_pool.length != 2) {
        return false;
      }
      if (!this.menudata || this.menudata.length == 0) {
        return false;
      }
      let menu_part = [];
      //console.log(this.menudata);

      for (let x = 0; x < this.menudata.length; x++) {
        //console.log(x);
        //console.log(this.menudata[x]);
        if (this.menu_active_name_pool.includes(this.menudata[x].name)) {
          menu_part.push(this.menudata[x].text);

          for (let y = 0; y < this.menudata[x].children.length; y++) {
            if (
              this.menu_active_name_pool.includes(
                this.menudata[x]["children"][y].name
              )
            ) {
              menu_part.push(this.menudata[x]["children"][y].text);
              break;
            }
          }
          break;
        }
      }
      //console.log(menu_part);
      this.footer_breadcrumbs_menu_part = menu_part;
    },
    change_theme() {
      // 项目 基调背景色
      // $panda-base-light     = #242B38
      // $panda-base-dark     = #1B212C
      // $panda-dark-light  = #23324
      // $panda-dark-dark  = #121720
      // // 项目 文字颜色
      // $panda-text-light  = #FFFFFF
      // $panda-text-dark  = #788299
      // colors.setBrand('panda-base-light', '#fff',document.getElementsByTagName("body")[0])
    },
    updateOnlineStatus(e) {
      const { type } = e;
      this.is_online = type === "online";
    },

    compute_active_menu_level() {
      //console.log(this.$route);
      this.menu_active_name_pool = [];
      this.menu_active_name_pool.push(this.$route.matched[1].name);
      let str = this.$route.matched[2].name
        .split("_")
        .slice(0, 2)
        .join("_");
      this.menu_active_name_pool.push(str);

      this.compute_footer_breadcrumbs_menu_part();
    },

    menu_level_1_mouseenter(item, index) {
      this.show_menu_2_data = [];
      this.show_menu_2_data = item.children;
      this.show_fixed_menu_2 = true;
      this.menu_active_name_pool.push(item.name);
    },
    menu_level_1_mouseleave(item) {
      this.$lodash.pull(this.menu_active_name_pool, item.name);
    },
    menu_level_2_container_mouseleave(item) {
      this.show_fixed_menu_2 = false;
    },
    menu_level_2_mouseenter(item) {
      this.menu_active_name_pool.push(item.name);
    },
    menu_level_2_mouseleave(item) {
      this.$lodash.pull(this.menu_active_name_pool, item.name);

      let name1 = this.$route.matched[1].name;
      let name2 = this.$route.matched[2].name;
      if (!this.menu_active_name_pool.includes(name1)) {
        this.menu_active_name_pool.push(name1);
      }
      if (!this.menu_active_name_pool.includes(name2)) {
        this.menu_active_name_pool.push(name2);
      }
    },
    menu_level_2_click(item, index) {
      this.$store.dispatch("set_breadcrumbsPart4", []);
      this.$store.dispatch("set_breadcrumbsPart3", []);
      this.show_fixed_menu_2 = false;
      this.left_menu_selection = index;
      this.$router.push({
        name: item.name
      });
    },
    onResize(size) {
      console.log(
        "========================================onResize(size)========================================="
      );
      console.log(size);
      //{width: 1731, height: 848}
      let obj = {
        width: size.width >= 1300 ? size.width : 1300,
        height: size.height >= 600 ? size.height : 600
      };
      this.set_window_size_info(obj);

      this.compute_container_style(obj);
    },
    compute_container_style(size) {
      let hc = window.innerHeight - 4;
      if (size) {
        hc = size.height - 4;
      }
      this.page_container_height = hc;
    },
    compute_menu_icon_class(item) {
      let str = `${item.icon}`;
      if (this.menu_active_name_pool.indexOf(item.name) > -1) {
        str = `${str}  panda-icon-active`;
      } else {
        str = `${str}  panda-icon-base`;
      }
      return str;
    },
    compute_menu_label_class(item) {
      let str = ``;
      if (this.menu_active_name_pool.indexOf(item.name) > -1) {
        str = `${str}  panda-icon-active`;
      } else {
        str = `${str}  panda-icon-base`;
      }
      return str;
    },
    compute_menu_1_class(item) {
      let str = ``;
      if (this.menu_active_name_pool.indexOf(item.name) > -1) {
        str = `${str} panda-q-item-level-one-active bg-panda-base-dark`;
      } else {
        str = `${str}  panda-q-item-level-one bg-panda-base-light`;
      }
      return str;
    },
    show_date() {
      let timeStamp = Date.now();

      //new Date().toString().split(" ")[5]
      let tz = "CN";

      this.footer_date = `CN ${date.formatDate(
        timeStamp,
        "MM/DD HH:mm:ss " // "YYYY-MM-DD HH:mm:ss "
      )}`;
      setTimeout(() => {
        this.show_date();
      }, 1000);
    }
  }
};
</script>
